<template>
  <div style="display: flex">
    <div class="left" style="width: 20%">
      <el-tree
        style="margin-top: 10px"
        :data="dataTree"
        ref="treeRef"
        highlight-current
        accordion
        :render-content="renderContent"
        :props="defaultProps"
        default-expand-all
        node-key="id"
        @node-click="handleNodeClick"
      ></el-tree>
    </div>
    <div class="right" style="width: 80%">
      <el-table
        :data="cameraData"
        height="calc(100vh - 250px)"
        v-loading="loading"
        border
        stripe
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{
          fontSize: '14px',
          'background-color': '#F3F6FD',
          color: '#333333',
          textAlign: 'center',
        }"
      >
        <el-table-column
          prop="serialNumber"
          label="摄像头编号"
        ></el-table-column>
        <el-table-column
          prop="videoUrl"
          label="摄像头地址"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="是否在线">
          <template v-slot:default="scope"
            ><span
              :style="{ color: scope.row.videoUrl ? '#1E90FF' : '#FF8C00' }"
              style="font-size: 13px"
            >
              {{ scope.row.videoUrl ? '在线' : '不在线' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot:default="scope">
            <el-link
              v-if="scope.row.videoUrl"
              style="color: #66b1ff; text-decoration: underline"
              @click="intoCamera(scope.row)"
              >进入摄像头
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <open-cctv ref="cctv"></open-cctv>
  </div>
</template>

<script>
import openCctv from './components/openCctv.vue'

export default {
  name: 'warehouseCamera',
  components: {
    openCctv,
  },
  data() {
    return {
      dataTree: [
        {
          label: '仓库列表',
          icon: 'el-icon-basketball',
          children: [],
        },
      ],
      cameraData: [],
      authority: [],
      loading: false,
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
  created() {
    const {authorityList = []} = this.$quinn.getStorage("userData") || {};
    this.authority = authorityList
    this.$api.cameraGetAreaCameraList().then((res) => {
      res.map((a) => {
        a.label = a.areaName
        a.id = a.area
        a.icon = 'el-icon-place'
      })
      this.dataTree[0].children = res
      // 默认选中第一个节点
      this.$nextTick(() => {
        if (res.length) {
          const firstId = res[0].areaId
          this.$refs.treeRef.setCurrentKey(firstId)
          this.handleNodeClick(res[0]) // 如果有点击事件逻辑
        }
      })
    })
  },
  methods: {
    renderContent(h, { node, data, store }) {
      return h('span', { class: 'custom-tree-node' }, [
        h('i', { class: data.icon, style: { marginRight: '6px' } }),
        h('span', data.label),
      ])
    },
    handleNodeClick(val) {
      if(!val.area) return
      this.loading = true
      this.areaId = val.area
      this.getList(val.area)
    },
    getList(el) {
      this.$api.cameraGetAreaAllCamera({ areaId: el }).then((res) => {
        this.cameraData = res
        this.loading = false
      })
    },
    intoCamera(row) {
      this.$api
        .firmCameraGetLiveAddress({ serialNumber: row.serialNumber, type: 1 })
        .then((res) => {
          this.$refs.cctv.init(res, row.serialNumber)
        })
    },
  },
}
</script>

<style scoped></style>
